<template>
  <div id="app">
    <router-view></router-view>
    <tab-bar
      v-if="$route.meta.showTabBar"
      :tabBarData="tabBarData">
    </tab-bar>
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue'

export default {
  data () {
    return {
      tabBarData: []
    }
  },

  created () {
    this.genTabBarData() // 程序启动时优先调用生成底部菜单栏数据
  },

  methods: {
    // 生成底部菜单栏数据
    genTabBarData () {
      const tabBar = [
        { id: 1, name: '推荐', icon: 'recommond', path: '/' },
        { id: 2, name: '分类', icon: 'category', path: '/category' },
        { id: 3, name: '我的', icon: 'my', path: '/mine' }
      ]
      this.tabBarData = tabBar
    }
  },

  components: {
    TabBar
  }
}
</script>

<style lang="css">
@import './assets/css/reset.css';
@import './assets/css/base.css';
#app {
  height: 100%;
}
</style>
